sdk/samples/all in on code/Visual Studio 2010/CSSLTreeViewCRUDDragDrop/ReadMe.txt

   1 =============================================================================
   2           APPLICATION : CSSLTreeViewCRUDDragDrop Project Overview
   3 =============================================================================
   4
   5 /////////////////////////////////////////////////////////////////////////////
   6 Summary:
   7
   8 This Application showcases a custom TreeView with added functionalities of
   9 CRUD and Drag-And-Drop operations
  10
  11 /////////////////////////////////////////////////////////////////////////////
  12 Prerequisite:
  13
  14 You must have the following components installed on your machine
  15 1) Microsoft Visual Studio 2010
  16 2) Microsoft Silverlight 4 SDK
  17 3) Microsoft Silverlight 4 Toolkit April 2010
  18
  19 /////////////////////////////////////////////////////////////////////////////
  20 Demo:
  21
  22 The following steps walk through a demonstration of the sample.
  23
  24 Step1. Build the sample project in Visual Studio 2010,
  25
  26 Step2. Start the Application by selecting "Start Debugging" or "Start without Debugging" in the build menu.
  27
  28 Step3. Right-Click in the box and select "Add" in the context menu. Add more root nodes and also child nodes to existing nodes.
  29
  30 Step4. Right-Click a node, and select "Edit". Edit the content of the node.
  31
  32 Step5. Right-Click a node, and select "Delete". This will delete the node.
  33
  34 Step6. Select any child node, drag and drop it to any other node.
  35
  36 Step7. Close the application
  37
  38 /////////////////////////////////////////////////////////////////////////////
  39 Implementation:
  40
  41 Step1. Create a new Silverlight Application called CSSLTreeViewCRUDDragDrop
  42
  43 Step2. Add a new class Node. Replace the code with this
  44
  45     /// <summary>
  46     /// Data bound to tree view
  47     /// </summary>
  48     public class Node
  49     {
  50         #region Private Members
  51
  52         /// <summary>
  53         /// Text to display in each tree view item
  54         /// </summary>
  55         private String text;
  56         /// <summary>
  57         /// Children of tree view item
  58         /// </summary>
  59         private ObservableCollection<Node> children;
  60
  61         /// <summary>
  62         /// Event Handler for PropertyChanged Event
  63         /// </summary>
  64         public event PropertyChangedEventHandler PropertyChanged;
  65
  66         #endregion
  67
  68         #region Public Properties
  69
  70         /// <summary>
  71         /// Gets or sets the Children of node
  72         /// </summary>
  73         public ObservableCollection<Node> Children
  74         {
  75             get { return children; }
  76             set { children = value; }
  77         }
  78
  79         /// <summary>
  80         /// Gets or sets the Text of node
  81         /// </summary>
  82         public String Text
  83         { get { return text; } set { text = value; } }
  84
  85         #endregion
  86
  87         #region Constructor
  88
  89         /// <summary>
  90         /// Creates a new instance of Node
  91         /// </summary>
  92         /// <param name="text"></param>
  93         public Node(String text)
  94         {
  95             Children = new ObservableCollection<Node>();
  96             Text = text;
  97         }
  98
  99         #endregion
 100
 101         #region Public Methods
 102
 103         /// <summary>
 104         /// Adds a child lnode
 105         /// </summary>
 106         /// <param name="node">Node to be added</param>
 107         public void Add(Node node)
 108         {
 109             children.Add(node);
 110             NotifyPropertyChanged("Children");
 111         }
 112
 113         /// <summary>
 114         /// Deletes a child node
 115         /// </summary>
 116         /// <param name="node">Node to be deleted</param>
 117         public void Delete(Node node)
 118         {
 119             children.Remove(node);
 120             NotifyPropertyChanged("Children");
 121         }
 122
 123         #endregion
 124
 125         #region Private Methods
 126
 127         /// <summary>
 128         /// Event handler for PropertyChange
 129         /// </summary>
 130         /// <param name="info"></param>
 131         private void NotifyPropertyChanged(String info)
 132         {
 133             if (PropertyChanged != null)
 134             {
 135                 PropertyChanged(this, new PropertyChangedEventArgs(info));
 136             }
 137         }
 138
 139         #endregion
 140     }
 141
 142 Step3. Add a new Silverlight User Control called TreeViewCRUDDragDrop
 143
 144 Replace the code in TreeViewCrudDragDrop.xaml by the following code
 145
 146 <UserControl
 147     xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"
 148     x:Class="CSSLTreeViewCRUDDragDrop.TreeViewCrudDragDrop"
 149     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 150     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 151     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 152     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 153     mc:Ignorable="d"
 154     d:DesignHeight="300" d:DesignWidth="400"
 155     xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
 156     xmlns:mswindows="clr-namespace:Microsoft.Windows;assembly=System.Windows.Controls.Toolkit">
 157
 158     <UserControl.Resources>
 159         <!-- Template for Edit mode of TreeViewItem -->
 160         <sdk:HierarchicalDataTemplate x:Key="TreeViewMainEditTemplate"
 161                                       ItemsSource="{Binding Children}">
 162             <TextBox Text="{Binding Text,Mode=TwoWay}" >
 163             </TextBox>
 164         </sdk:HierarchicalDataTemplate>
 165         <!-- Template for Read mode for TreeViewItem -->
 166         <sdk:HierarchicalDataTemplate x:Key="TreeViewMainReadTemplate"
 167                                       ItemsSource="{Binding Children}">
 168             <TextBlock Text="{Binding Text,Mode=TwoWay}"
 169                       MouseRightButtonDown="TreeViewMain_MouseRightButtonDown"
 170                       MouseRightButtonUp="TreeViewMain_MouseRightButtonUp"
 171                       MouseLeftButtonDown="TreeViewMain_MouseLeftButtonDown" >
 172             </TextBlock>
 173         </sdk:HierarchicalDataTemplate>
 174     </UserControl.Resources>
 175
 176     <Grid x:Name="LayoutRoot" Background="White">
 177         <!-- TreeViewDragDropTarget from Toolkit to add DragAndDrop feature -->
 178         <toolkit:TreeViewDragDropTarget AllowDrop="True">
 179             <!-- Custom TreeView  -->
 180             <sdk:TreeView Name="TreeViewMain"
 181                       ItemTemplate="{StaticResource TreeViewMainReadTemplate}"
 182                       MouseRightButtonDown="TreeViewMain_MouseRightButtonDown"
 183                       MouseRightButtonUp="TreeViewMain_MouseRightButtonUp"
 184                       MouseLeftButtonDown="TreeViewMain_MouseLeftButtonDown"
 185                       Width="400" Height="400"  >
 186             </sdk:TreeView>
 187         </toolkit:TreeViewDragDropTarget>
 188
 189         <!-- Context Menu -->
 190         <Canvas>
 191             <Popup Name="ContextMenu" Visibility="Collapsed">
 192                 <Border BorderThickness="1" BorderBrush="Black" Background="White">
 193                     <StackPanel>
 194                         <HyperlinkButton Content="Add" Name="AddButton"
 195                                          Click="AddButton_Click" />
 196                         <HyperlinkButton Content="Edit" Name="EditButton"
 197                                          Click="EditButton_Click"/>
 198                         <HyperlinkButton Content="Delete" Name="DeleteButton"
 199                                          Click="DeleteButton_Click"/>
 200                     </StackPanel>
 201                 </Border>
 202             </Popup>
 203         </Canvas>
 204     </Grid>
 205
 206 </UserControl>
 207
 208 Replace the code in TreeViewCrudDragDrop.xaml.cs with the following code
 209
 210     /// <summary>
 211     /// Code Behind of Custom Silverlight User Control which implements
 212     /// a TreeView with added functionalities of CRUD and Drag-And-Drop
 213     /// </summary>
 214     public partial class TreeViewCrudDragDrop : UserControl
 215     {
 216         #region Member Variables
 217
 218         /// <summary>
 219         /// Collection bound to TreView
 220         /// </summary>
 221         ObservableCollection<Node> objectTree;
 222
 223         /// <summary>
 224         /// Data bound to currently selected TreeViewItem
 225         /// </summary>
 226         Node selectedNode;
 227
 228         #endregion
 229
 230         #region Properties
 231
 232         /// <summary>
 233         /// Gets or sets the data bound to TreeView
 234         /// </summary>
 235         public List<Node> Items
 236         {
 237             get
 238             {
 239                 return objectTree.ToList<Node>();
 240             }
 241             set
 242             {
 243                 objectTree = new ObservableCollection<Node>(value);
 244                 TreeViewMain.ItemsSource = objectTree;
 245             }
 246         }
 247
 248         #endregion
 249
 250         #region Constructors
 251
 252         /// <summary>
 253         /// Creates a new instance of TreeViewCrudDragDrop
 254         /// </summary>
 255         public TreeViewCrudDragDrop()
 256         {
 257             InitializeComponent();
 258             objectTree = new ObservableCollection<Node>();
 259             TreeViewMain.ItemsSource = objectTree;
 260         }
 261
 262         #endregion
 263
 264         #region Event Handlers
 265
 266         /// <summary>
 267         /// Event handler for MouseRightButtonDown of TreeView and TreeViewItem
 268         /// </summary>
 269         /// <param name="sender">Object on which event occurred</param>
 270         /// <param name="e">Event Arguements for the event</param>
 271         private void TreeViewMain_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
 272         {
 273             DisableEditForSelectedItem();
 274
 275             e.Handled = true;
 276         }
 277
 278         /// <summary>
 279         /// Event handler for MouseRightButtonUp of TreeView and TreeViewItem
 280         /// </summary>
 281         /// <param name="sender">Object on which event occurred</param>
 282         /// <param name="e">Event Arguements for the event</param>
 283         private void TreeViewMain_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
 284         {
 285             DisableEditForSelectedItem();
 286
 287             if (sender is TextBlock)
 288             {
 289                 selectedNode = (Node)((sender as TextBlock).DataContext);
 290             }
 291             else
 292             {
 293                 selectedNode = null;
 294             }
 295
 296             ShowContextMenu(e);
 297         }
 298
 299         /// <summary>
 300         /// Event handler for MouseLeftButtonDown of TreeView and TreeViewItem
 301         /// </summary>
 302         /// <param name="sender">Object on which event occurred</param>
 303         /// <param name="e">Event Arguements for the event</param>
 304         private void TreeViewMain_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
 305         {
 306             DisableEditForSelectedItem();
 307
 308             HideContextMenu();
 309         }
 310
 311         /// <summary>
 312         /// Event handler for Add Button Click Event
 313         /// </summary>
 314         /// <param name="sender">Add Button</param>
 315         /// <param name="e">Event arguements for event</param>
 316         private void AddButton_Click(object sender, RoutedEventArgs e)
 317         {
 318             Node newNode = new Node("New Node");
 319
 320             if (selectedNode != null)
 321             {
 322                 selectedNode.Add(newNode);
 323             }
 324             else
 325             {
 326                 if (objectTree != null)
 327                 {
 328                     objectTree.Add(newNode);
 329                 }
 330                 else
 331                 {
 332                     objectTree = new ObservableCollection<Node>();
 333                     objectTree.Add(newNode);
 334                 }
 335             }
 336
 337             HideContextMenu();
 338         }
 339
 340         /// <summary>
 341         /// Event handler for Edit Button Click Event
 342         /// </summary>
 343         /// <param name="sender">Edit Button</param>
 344         /// <param name="e">Event arguements for event</param>
 345         private void EditButton_Click(object sender, RoutedEventArgs e)
 346         {
 347             EnalbleEditForSelectedItem();
 348
 349             TreeViewItem selectedTreeViewItem =
 350                 TreeViewExtensions.GetContainerFromItem(TreeViewMain, selectedNode);
 351
 352             HideContextMenu();
 353         }
 354
 355         /// <summary>
 356         /// Event handler for Delete Button Click Event
 357         /// </summary>
 358         /// <param name="sender">Delete Button</param>
 359         /// <param name="e">Event arguements for event</param>
 360         private void DeleteButton_Click(object sender, RoutedEventArgs e)
 361         {
 362             TreeViewItem selectedTreeViewItem =
 363                 TreeViewExtensions.GetContainerFromItem(TreeViewMain, selectedNode);
 364
 365             if (selectedTreeViewItem != null)
 366             {
 367                 TreeViewItem selectedTreeViewItemParent =
 368                     TreeViewExtensions.GetParentTreeViewItem(selectedTreeViewItem);
 369
 370                 if (selectedTreeViewItemParent != null)
 371                 {
 372                     Node seleactedParentNode = (Node)selectedTreeViewItemParent.DataContext;
 373                     seleactedParentNode.Delete(selectedNode);
 374                 }
 375                 else
 376                 {
 377                     objectTree.Remove(selectedNode);
 378                 }
 379             }
 380
 381             HideContextMenu();
 382         }
 383
 384         #endregion
 385
 386         #region Methods
 387
 388         /// <summary>
 389         /// Show context menu
 390         /// </summary>
 391         /// <param name="e">Mouse Button Event Arguements for getting cursor position</param>
 392         private void ShowContextMenu(MouseButtonEventArgs e)
 393         {
 394             e.Handled = true;
 395             Point p = e.GetPosition(null);
 396             ContextMenu.Visibility = Visibility.Visible;
 397             ContextMenu.IsOpen = true;
 398             ContextMenu.SetValue(Canvas.LeftProperty, (double)p.X);
 399             ContextMenu.SetValue(Canvas.TopProperty, (double)p.Y);
 400         }
 401
 402         /// <summary>
 403         /// Hide context menu
 404         /// </summary>
 405         private void HideContextMenu()
 406         {
 407             ContextMenu.Visibility = Visibility.Collapsed;
 408             ContextMenu.IsOpen = false;
 409         }
 410
 411         /// <summary>
 412         /// Enable Edit Mode for selected TreeViewItem
 413         /// </summary>
 414         private void EnalbleEditForSelectedItem()
 415         {
 416             if (selectedNode != null)
 417             {
 418                 SetTemplateForSelectedItem("TreeViewMainEditTemplate");
 419             }
 420         }
 421
 422         /// <summary>
 423         /// Disable Edit mode for selected TreeViewItem
 424         /// </summary>
 425         private void DisableEditForSelectedItem()
 426         {
 427             if (selectedNode != null)
 428             {
 429                 SetTemplateForSelectedItem("TreeViewMainReadTemplate");
 430                 selectedNode = null;
 431             }
 432         }
 433
 434         /// <summary>
 435         /// Set Template for Selected TreeViewItem
 436         /// </summary>
 437         /// <param name="templateName">Template Name</param>
 438         private void SetTemplateForSelectedItem(String templateName)
 439         {
 440             HierarchicalDataTemplate hdt = (HierarchicalDataTemplate)Resources[templateName];
 441
 442             TreeViewItem selectedTreeViewItem =
 443                 TreeViewExtensions.GetContainerFromItem(TreeViewMain, selectedNode);
 444
 445             if (selectedTreeViewItem != null)
 446                 selectedTreeViewItem.HeaderTemplate = hdt;
 447         }
 448
 449         #endregion
 450     }
 451
 452 Step3. Add instance of TreeViewCrudDragDrop in MainPage
 453
 454 Add the following attribute in the UserControl attribute of MainPage
 455
 456 xmlns:Crud="clr-namespace:CSSLTreeViewCRUDDragDrop"
 457
 458 Add the following code inside the grid tag
 459
 460 <Crud:TreeViewCrudDragDrop />
 461
 462 /////////////////////////////////////////////////////////////////////////////
 463 References:
 464
 465 MichaelSnow: Silverlight Tip of the Day #3 – Mouse Right Clicks
 466 http://www.michaelsnow.com/2010/04/23/silverlight-tip-of-the-day-3-mouse-right-clicks/
 467
 468 MSDN: DataBinding Silverlight
 469 http://msdn.microsoft.com/en-us/library/cc278072(v=vs.95).aspx
 470
 471 Codeplex: Silverlight Toolkit
 472 http://timheuer.com/blog/archive/2009/10/19/silverlight-toolkit-adds-drag-drop-support.aspx
 473
 474 /////////////////////////////////////////////////////////////////////////////